<template>
	<view>
		<van-cell-group ref="c">
		  <van-field
			@change="accountChange"
			label="账号"
		    placeholder="请输入账号"
		    border="{{ false }}"
		    required
		    clearable
		  />
		  <van-field
		    placeholder="请输入密码"
			label="密码"
		    border="{{ false }}"
			@change="passChange"
		    required
			type="password"
		    clearable
		  />
		  <van-field
		    placeholder="请输入姓名"
		    border="{{ false }}"
		    required
			label="姓名"
			@change="usernameChange"
		    clearable
		  />
		  <van-field
		    placeholder="请输入身份证"
		    border="{{ false }}"
			label="身份证"
			@change="idCardChange"
		    required
		    clearable
		  />
		  <van-field
		    placeholder="请输入联系电话"
		    border="{{ false }}"
			label="联系电话"
			@change="phoneChange"
		    required
		    clearable
		  />
		</van-cell-group>
		<view class="action">
			<van-button type="primary" @click="handleRegister">注册</van-button>
			<van-button type="info" @click="handleGoBack" >返回</van-button>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { registerUser } from "@/api/user";
import {  ref, unref } from "vue"
	const registerInfo = ref<any>({})
	const c = ref()
	const handleGoBack = ()=>{
		uni.redirectTo({url:'/pages/login/login'})
	}
	const handleRegister =  ()=>{
		registerInfo.value.state = 0
		registerUser(unref(registerInfo)).then((res)=>{
			if(res.code===0){
				uni.showToast({
					title:'注册成功,即将跳转到登录页面',
					duration:1000,
					icon:"none"
				})
				setTimeout(()=>{
					uni.redirectTo({url:'/pages/login/login'})
				},1000)
			}else{
				uni.showToast({
					title:res.message,
					duration:1000,icon:"error"
				})
			}
			
		})
		
	}
	const accountChange = (e:any)=>{
		registerInfo.value.account =  e.detail
	}
	const passChange = (e:any)=>{
		registerInfo.value.password =  e.detail
	}
	const usernameChange = (e:any)=>{
		registerInfo.value.username =  e.detail
	}
	const idCardChange = (e:any)=>{
		registerInfo.value.idCard =  e.detail
	}
	const phoneChange = (e:any)=>{
		registerInfo.value.phone =  e.detail
	}
</script>

<style>
.action{
	display: flex;
	justify-content: space-around;
}
</style>
